<!DOCTYPE html>
<html>
<body>
<p>请输入</p>
<form action="/add/" method="get">
    color: <input type="text" id="color" name="color" value="red"> <br>
    number: <input type="text" id="number" name="number" value="1"> <br>
    <p>result: <span id='result'></span></p>
    <button type="button" id='sum'>提交</button>
</form>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
      $("#sum").click(function(){
        var color = $("#color").val();
        var number = $("#number").val();
        
        //{'color':color,'number':number}中的'color'和'number'
        //对应views.py中get_pic函数中的'color'和'number'
        $.get("/get_pic", {'color':color,'number':number}, function(ret){
            $('#result').html('') //清空前面的结果
            $.each(ret, function(index, item){
                //在图片src属性值后面加个随机参数 t ，可以避免加载浏览器缓存图片
                $('#result').append('<img src="/static/pics/'+item+'?t='+Math.random()+'">');
            })
        })
      });
    });
</script>
</body>
</html>

